<template>
	<view class="page">
		<!-- <fu-custom :isBack="false" :isBottom="true" bgColor="bg-white" :isBackText="true">

      <text slot='backText' class="cuIcon-close text-lg c-6" @tap='back'></text>
    	<view slot="content">选择城市</view>
    </fu-custom> -->
		<view class="cu-custom bg-white" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
			<view class="cu-bar bg-white fixed solid-bottom"
				:style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
				<view class="action" @click="back"><text class="cuIcon-back" style="margin-right: 0;"></text></view>
				<view class="search-form round" style="margin-left: 24rpx;">
					<text class="cuIcon-search text-bf"></text>
					<input class="text-666 fu-fs24" confirm-type="search" type="text" v-model="cityName"
						placeholder-style="color:#BFBFBF;font-size:28rpx" placeholder="全球城市(如北京)"
						placeholder-class="text-bf" @input="handleInput" @confirm="get_list" />
					<text v-if="cityName.length != 0" class="cuIcon-close text-666 padding-right-xs"
						@click="clear"></text>
				</view>
			</view>
		</view>

		<scroll-view class="scrollList" scroll-y :scroll-into-view="scrollViewId"
			:style="{height:winHeight-CustomBar+'px'}">
			<view class="tui-list search-result">
				<view class="tui-list-cell" hover-class="tui-list-cell-hover" v-for="(item,index) in searchResult"
					:key="index" @tap="selectCity" :data-name="item" :hover-stay-time='150'>
					<view class="tui-list-cell-navigate">
						{{item}}
					</view>
				</view>
			</view>
			<view v-if="!inputVal">
				<view class="pd32 pd-t32">
					<view class="gray f26 margin-bottom-sm c-9" style="color: #999;">当前/历史</view>
					<view class="flex">
						<view class="btn1 flex justify-center align-center" @tap.stop="get_dw">
							<image src="@/static/home/weizhi.png"
								style="width: 32rpx;height: 32rpx;margin-right: 16rpx;flex-shrink: 0;"
								class="va-tt mr-3"></image>
							<text class="city-name" style="color: #FD9CAE;">{{localCity?localCity:'定位失败'}}</text>
						</view>
						<!-- <view class="margin-top-xs pl-24">
              <image src="https://localelife.chunchuangkeji.cn/h5img/images/city02.png" style="width: 32rpx;height: 32rpx;" class="va-s"></image>
              <text class="reGps">重新定位</text>
            </view> -->

					</view>

				</view>

				<view class="pd32 pd-b32 pd-t32">
					<view class="gray f26 margin-bottom-sm c-9" style="color: #999;">热门城市</view>
					<view class="city-names">
						<view class="btn" v-for="(item,index) in hotCity" :key="index" :hover-stay-time="150"
							@tap="selectCity" :data-item="item">
							{{item.short_name}}
						</view>
					</view>
				</view>
				<view class="tui-list city-list">
					<block v-for="(list,index) in lists" :key="index" v-if="list.data[0]">
						<view class="tui-list-cell-divider mlr-32" :id="list.first">
							{{list.first}}
						</view>
						<view class="tui-list-cell" hover-class="tui-list-cell-hover" v-for="(item,index2) in list.data"
							:key="index2" @tap="selectCity" :data-item="item" :hover-stay-time='150'>
							<view class="tui-list-cell-navigate" :class="[list.data.length-1==index?'last':'']">
								{{item.short_name}}
							</view>
						</view>
					</block>
				</view>
			</view>
		</scroll-view>
		<view class="tui-indexed-list-bar" :style="[{height:indexBarHeight+'px',top:CustomBar + 45+ 'px'}]"
			@touchstart="touchStart" @touchmove.stop="touchMove" @touchend.stop="touchEnd"
			@touchcancel.stop="touchCancel" v-if="!inputVal">
			<text class="tui-indexed-list-text c-9 fu-fs22" :style="{color: '#FD9CAE'}">
				历史\n热门
			</text>
			<text v-for="(items,index) in lists" :key="index" class="tui-indexed-list-text c-9"
				:style="{height:indexBarItemHeight+'px'}">
				{{items.first}}
			</text>
		</view>
		<view class="tui-indexed-list-alert" v-if="touchmove && lists[touchmoveIndex].first">
			{{lists[touchmoveIndex].first}}
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'; //状态管理
	import amapFile from '@/libs/amap-wx.js';
	export default {
		data() {
			return {
				background: {
					background: '#fff',
				},
				lists: [],
				touchmove: false, // 是否在索引表上滑动
				touchmoveIndex: 0,
				titleHeight: 0, // 索引二字距离窗口顶部的高度
				indexBarHeight: 0, // 索引表高度
				indexBarItemHeight: 0, // 索引表子项的高度
				scrollViewId: '', // scroll-view滚动到的子元素的id
				winHeight: 0,
				inputShowed: false, // 输入框是否显示
				inputVal: '', // 搜索框输入的内容
				hotCity: [], // 热门城市
				searchResult: [], // 搜索城市的结果,
				localCity: '',
				latitude: '',
				longitude: '',
				cityName: ''
			}
		},
		computed: {
			location: {
				get() {
					return this.$store.getters.location;
				},
				set() {}
			}
		},

		onLoad: function(options) {
			const that = this;

			this.get_list();
			this.getHotCity();
			this.myAmapFun = new amapFile.AMapWX({
				key: '304c94f1cdc050e10738829384500fdb'
			});
			if (options.city == '获取中...') {
				that.localCity = '获取中...'
				this.get_dw()
			} else {
				that.localCity = options.city
				this.longitude = options.lon
				this.latitude = options.lat
			}
			setTimeout(() => {
				uni.getSystemInfo({
					success: function(res) {
						let winHeight = res.windowHeight
						let barHeight = winHeight - uni.upx2px(304);
						that.winHeight = winHeight;
						that.indexBarHeight = barHeight;
						that.indexBarItemHeight = barHeight / 25;
						that.titleHeight = uni.upx2px(180);
					}
				})
			}, 50)
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			clear() {
				this.cityName = ''
			},
			handleInput() {
				this.get_list();
			},
			get_list() {
				this.$api.post(global.apiUrls.get_city_area, {
					keywords: this.cityName
				}).then(res => {
					if (res.data.code == 1) {
						this.lists = res.data.data;
						// this.hotCity = res.data.data.hot_city;
					}
				})
			},
			getHotCity() {
				this.$api.post(global.apiUrls.post6402abeb56f05).then(res => {
					if (res.data.code == 1) {
						this.hotCity = res.data.data
					}
				})
			},

			// 选择城市 把选中的城市保存到vuex 并返回给上一页
			selectCity(e) {
				let region = e.currentTarget.dataset.item;
				this.$store.commit('Current_City', region.short_name);
				uni.setStorageSync('Current_City', region.short_name)
				this.location.city = region.short_name;
				// this.location.latitude = region.lat;
				// this.location.longitude = region.lng;
				this.$store.commit('updataLocation', this.location)
				uni.$emit('indexCity', {
					city: region.short_name
				})
				uni.$emit('updateHomeData')
				uni.navigateBack({
					delta: 1
				})
			},
			//获取当前定位
			get_dw() {
				let _this = this;
				uni.showLoading({
					title: '获取中...'
				})
				wx.getFuzzyLocation({
					// type: 'wgs84',
					geocode: true,
					success: adr => {
						this.longitude = adr.longitude;
						this.latitude = adr.latitude;
						uni.setStorageSync('LONGITUDE', adr.longitude);
						uni.setStorageSync('LATITUDE', adr.latitude);
						// let a = adr.address
						// this.localCity = a.city
						this.myAmapFun.getRegeo({
							location: adr.longitude + ',' + adr.latitude,
							success: data => {
								//成功回调
								console.log('自动定位 SDK回调', data);
								let regeoData = data[0].regeocodeData.addressComponent;
								this.localCity = Array.isArray(regeoData.city) && regeoData.city
									.length == 0 ? regeoData
									.province : regeoData.city;
								let latitude = data[0].latitude;
								let longitude = data[0].longitude;
								this.$store.commit('Current_City', this.localCity);
								uni.setStorageSync('Current_City', this.localCity)
								uni.$emit('indexCity', {
									city: this.localCity
								})
								_this.$store.commit('updataLocation', {
									province: regeoData.province,
									city: this.localCity,
									district: regeoData.district,
									addressDesc: data[0].desc,
									provinceCode: regeoData.adcode.substr(0, 2) + '0000',
									cityCode: regeoData.adcode.substr(0, 4) + '00',
									districtCode: regeoData.adcode + '',
									latitude: latitude,
									longitude: longitude
								});
								uni.$emit('updateHomeData')
								console.log(_this.location, 555);
							},
							fail: info => {
								//失败回调
								console.log(info);
							}
						});
					},
					complete: () => {
						uni.hideLoading()
					}
				});
			},

			touchStart(e) {
				this.touchmove = true;
				let pageY = e.touches[0].pageY;
				let index = Math.floor((pageY - this.titleHeight) / this.indexBarItemHeight - 3)
				// let item = this.lists[index === 0 ? 1 : index]
				let item = this.lists[index]
				if (item) {
					this.scrollViewId = item.first;
					this.touchmoveIndex = index;
				}
			},
			touchMove(e) {
				let pageY = e.touches[0].pageY;
				let index = Math.floor((pageY - this.titleHeight) / this.indexBarItemHeight - 3)
				// let item = this.lists[index === 0 ? 1 : index]
				let item = this.lists[index]
				if (item) {
					this.scrollViewId = item.first;
					this.touchmoveIndex = index
				}

			},
			touchEnd() {
				this.touchmove = false;
				this.touchmoveIndex = -1;
			},
			touchCancel() {
				this.touchmove = false;
				this.touchmoveIndex = -1;
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.f26 {
		font-size: 26rpx;
	}

	.pd32 {
		padding: 0 32rpx
	}

	.pd-t32 {
		padding-top: 32rpx;
	}

	.pd-b32 {
		padding-bottom: 32rpx;
	}

	.btn {
		height: 64rpx;
		line-height: 64rpx;
		color: #333;
		font-size: 28rpx;
		text-align: center;
		background: #F5F5F5;
		padding: 0 32rpx;
		margin: 0 16rpx 16rpx 0;
		border-radius: 4rpx;
		min-width: 200rpx;
	}

	.reGps {
		margin: 0 0 0 10rpx;
		color: #999;
	}

	.icon-dingwei {
		margin-right: 4rpx;
	}

	.icon-guanbi1 {
		position: absolute;
		top: -32rpx;
		right: -6rpx;
		color: #999;
		font-size: 32upx;
		height: 32rpx;
	}

	.search-box {
		margin: 24rpx 32rpx 0;
		height: 68rpx;
		background-color: #F9F9F9;
		border-radius: 34rpx;
		padding: 0 24rpx;

		.search {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}
	}

	.page {
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.bg-white {
		border-bottom: solid 1px #eee;
	}

	// 顶部的


	.scrollList {
		position: relative;
		flex: 1;
	}

	.tui-list-cell {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0;
	}

	.tui-list-cell::after {
		border: 0;
	}

	.tui-list-cell-hover {
		background-color: #eee !important;
	}

	.tui-list-cell-navigate {
		position: relative;
		line-height: 76upx;
		width: calc(100% - 68upx);
		margin: 0 34upx;
		font-size: 28upx;
		color: #333;
		border-bottom: 2upx solid #eee;
	}

	.current-city {
		height: 90upx;
		margin: 0 30upx;
		border-bottom: 2upx solid #eee;
		display: flex;
		align-items: center;
		color: #333;

		.iconfont {
			margin-right: 4upx;
			font-size: 32upx;
			// color: $mainColor;
		}
	}

	.btn1 {
		width: 228rpx;
		height: 80rpx;
		background-color: #fff;
		border: 1rpx solid #BFBFBF;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.city-name {
		display: inline-block;
		font-size: 28upx;
		line-height: 28upx;
		color: #FF6F27;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.hot-city {
		margin: 0 30upx;
		// border-bottom: 2upx solid #eee;
		padding-bottom: 10upx;
	}

	.hot-city .title {
		height: 80upx !important;
		font-size: 28upx !important;
		line-height: 80upx !important;
		color: #999;
	}

	.btn {
		width: 208rpx;
		height: 80rpx;
		border-radius: 8rpx;
		margin-right: 8rpx;
		border: 1rpx solid #eee;
		background-color: #fff;
		box-sizing: border-box;
		line-height: 80rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0 20rpx;

		&:nth-of-type(3n) {
			margin-right: 0;
		}
	}

	.city-names {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: space-between;
		margin-right: 30upx;
	}

	.city-name-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: auto;
		margin-bottom: 16upx;
		margin-right: 30upx;
		padding: 10upx 55upx;
		border-radius: 42upx;
		font-size: 26upx;
		color: #333;
		background: #fff;
		position: relative;
	}

	.city-name-item text {
		position: absolute;
		top: -10upx;
		right: -6upx;
		color: #999;
		font-size: 28upx;
	}

	.tui-list {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-list-cell-divider {
		height: 80upx;
		font-size: 26upx;
		color: #999;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		background-color: #F8F8F8;
	}

	.tui-indexed-list-bar {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		z-index: 9999;
		position: absolute;
		right: 0;
		padding-right: 10upx;
		width: 80upx;
	}

	.tui-indexed-list-text {
		font-size: 26upx;
		white-space: nowrap;
		width: 100%;
		// padding-left: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-indexed-list-bar.active {
		background-color: rgb(200, 200, 200);
	}

	.tui-indexed-list-alert {
		position: absolute;
		z-index: 20;
		width: 160upx;
		height: 160upx;
		left: 50%;
		top: 50%;
		margin-left: -80upx;
		margin-top: -80upx;
		border-radius: 80upx;
		text-align: center;
		line-height: 160upx;
		font-size: 70upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>